<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="Ocean CTF,漏洞靶场,开源CTF平台,CTF练习">
    <meta name="description" content="Ocean CTF 是一个完整的开源CTF训练平台,可用于CTF题库练习、动态靶场、漏洞复现。">
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="static/index.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="/static/lib_bootstrap_message.js"></script>
    <script type="text/javascript" src="/static/js/lib.js"></script>
    <title>Ocean CTF 训练平台</title>
</head>
<body>
<div id="app">
    {% include 'header.html' %}
    {% include 'lib_message.html' %}
    <div class="models" id="models">
    </div>
    <div class="container" style="margin-top: 30px">
        <div class="types">
            <div class="type_items">
                <div class="type_title">类型</div>
                {% if subject %}
                    <li class="type"><a href="?">全部</a></li>
                {% else %}
                    <li class="type active"><a>全部</a></li>
                {% endif %}

                {% for _subject in subjects %}
                    {% if subject==_subject %}
                        <li class="type active"><a href="?subject={{ _subject }}">{{ _subject }}</a></li>
                    {% else %}
                        <li class="type"><a href="?subject={{ _subject }}">{{ _subject }}</a></li>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {% if  challenges %}
            <div class="challenges">
                <div class="row">
                    {% for item in challenges %}
                        <div class="challenge col-md-3">
                            <div class="box" onclick="showDetail({{ item.id }})">
                                {% if item.has_solved %}
                                    <svg class="icon" viewBox="0 0 1152 1024" width="200" height="200">
                                    <path d="M772.617081 533.294306L656.679221 516.419099l-51.950297-105.121601c-10.747146-21.885935-46.617041-21.885935-57.364187 0L495.414439 516.419099l-115.937859 16.875207a31.988021 31.988021 0 0 0-17.750645 54.553572l83.961357 81.784282-19.812531 115.523179a31.976502 31.976502 0 0 0 46.398182 33.715858L576.04683 764.398258l103.773887 54.530534a31.976502 31.976502 0 0 0 46.398182-33.715859l-19.81253-115.523178 83.961357-81.784282a31.988021 31.988021 0 0 0-17.750645-54.553572zM649.69876 635.593772a31.988021 31.988021 0 0 0-9.21513 28.313489l11.691696 68.215002-61.280617-32.183843a31.838276 31.838276 0 0 0-29.741833 0l-61.280617 32.183843L511.540917 663.907261a31.988021 31.988021 0 0 0-9.21513-28.313489l-49.531326-48.310321 68.4569-9.963859a31.941946 31.941946 0 0 0 24.086047-17.497229l30.709422-62.086941 30.651828 62.086941a31.941946 31.941946 0 0 0 24.086047 17.497229l68.514494 9.963859z"
                                          p-id="3744" fill="#f4ea2a"></path>
                                    <path d="M1097.369795 233.445482l-163.568565 163.568564a418.044391 418.044391 0 0 0-57.502413-76.024826l266.317268-266.248155a31.993781 31.993781 0 0 0-45.24629-45.24629L828.564441 278.265572c-70.104105-53.816362-157.509616-86.196026-252.517611-86.196026s-182.413506 32.368146-252.517611 86.196026L54.723865 9.460218A32.006452 32.006452 0 1 0 9.477575 54.741065L275.748768 320.98922a418.044391 418.044391 0 0 0-57.502414 76.024826l-163.568564-163.568564A31.993781 31.993781 0 0 0 9.4315 278.691772l179.119097 179.119097a413.114296 413.114296 0 0 0-28.50931 150.218145c0 229.353077 186.606391 415.959467 415.959468 415.959467s415.959467-186.606391 415.959467-415.959467a413.114296 413.114296 0 0 0-28.50931-150.218145l179.119098-179.119097a31.993781 31.993781 0 0 0-45.246291-45.24629zM576.04683 960.000919c-194.070646 0-351.971906-157.889741-351.971906-351.971905S381.976184 256.068627 576.04683 256.068627s351.971906 157.889741 351.971906 351.960387S770.117476 960.000919 576.04683 960.000919z"
                                          p-id="3745" fill="#f4ea2a"></path>
                                {% endif %}

                                </svg>
                                <p class="title-wrap"><span class="c-title">{{ item.name }}</span></p>
                                <p class="solved-wrap">solved：{{ item.solved }}</p>
                                <p class="score-wrap">{{ item.integral }}<span style="font-size: 10px;">Pt</span></p>
                                <p class="time-wrap">create 2020-10-12</p>
                                <p class="author-wrap">By.Administrator</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <div v-else class="no-data">
                <img src="/static/images/404.png">
            </div>
        {% endif %}
    </div>
</div>
<script type="text/javascript">
    function showDetail(item) {
        let isLogin = getCookie('token');
        if (!isLogin) {
            return window.location.href = '/login'
        }
        $.ajax({
            url: `/challenge/${item}/detail`, method: 'get', success: function (res) {
                let ele = $("#models");
                ele.append(res);
                // 动态绑定时间
                $(".close").on('click', closeModel);
            }
        })

    }

    function closeModel() {
        $(".modal").remove()
        // document.getElementById(`model-${item}`).style.display = 'none'
    }

    function start(id) {
        // 启动容器
        $.ajax({
            url: `/challenge/${id}/start`, method: 'post', success: function (res) {
                if (res.status === 0) {
                    // 启动成功
                    reloadDetail(id)
                }
            }
        })
    }

    function reloadDetail(id) {
        $.ajax({
            url: `/challenge/${id}/detail`, method: 'get', success: function (res) {
                // let ele = document.getElementById(`model-${id}`);
                let ele = $(`#model-${id}`).first();
                ele.html(res)
            }
        })

    }

    function destroy(id) {
        // 销毁容器
        $.ajax({
            url: `/challenge/${id}/destroy`, method: 'post', success: function (res) {
                if (res.status === 0) {
                    // 启动成功
                    reloadDetail(id)
                }
            }
        })

    }

    function submitFlag(id) {
        // 提交flag
        let flag = document.getElementById(`flag-${id}`).value;
        $.ajax({
            url: `/challenge/${id}/submit_flag`,
            method: 'post',
            data: JSON.stringify({
                flag: flag
            }),
            contentType: 'application/json;charset=UTF-8',
            dataType: 'json',
            success: function (res) {
                if (res.status === 0) {
                    // flag 正确 关闭刷新页面
                    Message('success', '<strong>恭喜 您提交的flag正确!</strong>')
                    window.location.reload()
                } else {
                    Message('info', '<strong>抱歉 您提交的flag错误!</strong>')
                }
            },
            error:function (res){
                Message('error', `<strong>${res.responseJSON.msg}</strong>`)
            }
        })
    }
</script>

</body>
</html>